<template>
<!-- 大分类 -->
    <div class="type-app">
        <div class="top-img">
            <img :src="currentCategory.banner_url" alt="">
            <h5>{{currentCategory.front_desc}}</h5>
        </div>
        <div class="text">
             <span></span>
             <h3>{{currentCategory.name}}</h3>
        </div>
        <div class="goodslist">
            <van-grid :column-num="3">
                <van-grid-item v-for="(v,k) in currentCategory.subCategoryList" :key="v.id" :icon="v.wap_banner_url" :text="v.name" />
            </van-grid>
        </div>
    </div>
</template>

<script>
export default {
     data(){
         return{

         }
     },
     props:['currentCategory','categoryList']
}
</script>

<style lang="less">
.type-app{
    width: 80%;
    height: 100%;
    background-color: white;
    position: absolute;
    top: 54px;
    right: 0;
   
}
.top-img{
    width: 100%;
    height: 142px;
    background-color: rgba(rgb(43, 42, 42), rgb(44, 46, 44), rgb(34, 34, 36), 0.5);
    border-radius: 20px 20px;
    position: absolute;
    right: 0;
}
.top-img img{
    width: 95%;
    height:140px ;
    border-radius: 10px 10px;
    margin-left: 10px;
    box-shadow: 0 0 6px #000;
    filter: brightness(0.5);
}
.top-img h5{
    width: 100%;
    color: #fff;
    position: absolute;
    top: 48%;
    left: 0%;
    z-index: 222;
    text-align: center;
}
.text{
   width: 100%;
    height: 50px;
    position: relative;
    background: #fff;
    font-size: 16px;
    margin-top: 150px;
}
.text span{
    width: 50%;
    height: 2px;
    background-color: #ccc;
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}
.text h3{
    width: 30%;
    height: 40px;
    background-color: #fff;
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    line-height: 40px;
    text-align: center;
    color: #000;
}
.goodslist{
    margin-top: 10px;
}

</style>